---
title: "Font Weight"
description: "Utilities for controlling the font weight of an element."
features:
  responsive: true
  customizable: true
  hover: true
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/fontWeight'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Usage

Control the font weight of an element using the `font-{weight}` utilities.

```html lightBlue
<template preview>
  <dl class="text-light-blue-600 space-y-6">
    <div class="flex items-start">
      <dt class="w-32 text-right pr-6 flex-shrink-0 text-sm text-light-blue-600 text-opacity-50 font-mono leading-7">thin</dt>
      <dd class="text-xl font-thin">The quick brown fox jumps over the lazy dog.</dd>
    </div>
    <div class="flex items-start">
      <dt class="w-32 text-right pr-6 flex-shrink-0 text-sm text-light-blue-600 text-opacity-50 font-mono leading-7">extralight</dt>
      <dd class="text-xl font-extralight">The quick brown fox jumps over the lazy dog.</dd>
    </div>
    <div class="flex items-start">
      <dt class="w-32 text-right pr-6 flex-shrink-0 text-sm text-light-blue-600 text-opacity-50 font-mono leading-7">light</dt>
      <dd class="text-xl font-light">The quick brown fox jumps over the lazy dog.</dd>
    </div>
    <div class="flex items-start">
      <dt class="w-32 text-right pr-6 flex-shrink-0 text-sm text-light-blue-600 text-opacity-50 font-mono leading-7">normal</dt>
      <dd class="text-xl font-normal">The quick brown fox jumps over the lazy dog.</dd>
    </div>
    <div class="flex items-start">
      <dt class="w-32 text-right pr-6 flex-shrink-0 text-sm text-light-blue-600 text-opacity-50 font-mono leading-7">medium</dt>
      <dd class="text-xl font-medium">The quick brown fox jumps over the lazy dog.</dd>
    </div>
    <div class="flex items-start">
      <dt class="w-32 text-right pr-6 flex-shrink-0 text-sm text-light-blue-600 text-opacity-50 font-mono leading-7">semibold</dt>
      <dd class="text-xl font-semibold">The quick brown fox jumps over the lazy dog.</dd>
    </div>
    <div class="flex items-start">
      <dt class="w-32 text-right pr-6 flex-shrink-0 text-sm text-light-blue-600 text-opacity-50 font-mono leading-7">bold</dt>
      <dd class="text-xl font-bold">The quick brown fox jumps over the lazy dog.</dd>
    </div>
    <div class="flex items-start">
      <dt class="w-32 text-right pr-6 flex-shrink-0 text-sm text-light-blue-600 text-opacity-50 font-mono leading-7">extrabold</dt>
      <dd class="text-xl font-extrabold">The quick brown fox jumps over the lazy dog.</dd>
    </div>
    <div class="flex items-start">
      <dt class="w-32 text-right pr-6 flex-shrink-0 text-sm text-light-blue-600 text-opacity-50 font-mono leading-7">black</dt>
      <dd class="text-xl font-black">The quick brown fox jumps over the lazy dog.</dd>
    </div>
  </dl> 
</template>

<p class="**font-thin** ...">The quick brown fox ...</p>
<p class="**font-extralight** ...">The quick brown fox ...</p>
<p class="**font-light** ...">The quick brown fox ...</p>
<p class="**font-normal** ...">The quick brown fox ...</p>
<p class="**font-medium** ...">The quick brown fox ...</p>
<p class="**font-semibold** ...">The quick brown fox ...</p>
<p class="**font-bold** ...">The quick brown fox ...</p>
<p class="**font-extrabold** ...">The quick brown fox ...</p>
<p class="**font-black** ...">The quick brown fox ...</p>
```

## Responsive

To control the font weight of an element at a specific breakpoint, add a `{screen}:` prefix to any existing font weight utility. For example, use `md:font-bold` to apply the `font-bold` utility at only medium screen sizes and above.

```html
<p class="font-normal **md:font-bold** ...">The quick brown fox jumps over the lazy dog.</p>
```

For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.

## Customizing

### Font Weights

By default, Tailwind provides 10 `font-weight` utilities. You change, add, or remove these by editing the `theme.fontWeight` section of your Tailwind config.

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      fontWeight: {
-       hairline: 100,
+       'extra-light': 100,
-       thin: 200,
        light: 300,
        normal: 400,
        medium: 500,
-       semibold: 600,
        bold: 700,
-       extrabold: 800,
+       'extra-bold': 800,
        black: 900,
      }
    }
  }
```

### Variants

<Variants plugin="fontWeight" />

### Disabling

<Disabling plugin="fontWeight" />
